<template>
    <div v-loading="loading1"  class="main" style="height:100%;max-height: 100%;background:white;display: flex;flex-direction:column">
       
        <el-row   style="padding:30px;">
            <!-- <el-col class="help1" :span="24"></el-col> -->
            <el-col class ="help1"  :span="24" v-for="(item,index) in data"  :key="index"  style="display:flex;" >
            <div style="display:flex;flex:1;flex-direction:column;overflow: auto;padding:20px;">
                <div style="margin-bottom:20px;;align-content:center;text-align:center;font-size:18px;font-weight:bold;">{{item.title}}</div>
                <div style="display:flex;">
                   
                    <div  class="inlineline"  :style="{'flex':(index==4)?'3':'4','grid-template-columns':(index==4)?'repeat(3, 1fr)':'repeat(4, 1fr)'}" > 
                       <div v-for="(item2,index2) in item.kaig" :key="index2" >
                        <div style="display:flex;margin-left:10px;margin-bottom:10px;text-align:center;justify-content: start;">
                        <!-- <div class="circle"></div> -->
                        <div :class="{'alarmDiv':getFlash(item2) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item2)}"></div>
                        <div  :style="{'margin-left':'10px',color:getColorName(item2)}" >{{item2.deviceName}}</div>
                       </div>
                    </div>
                    </div>
                </div>
            </div>
        </el-col>
        </el-row  >
    </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
export default {
    name:"nail",
    data(){
        return{
            loading1:true,
            deptIds:[],
            deptId:this.$route.query.depCode,
            title:["艏侧推中央控制箱"],
            timer:null,
            data:[]
        }
    },
    created(){
        console.log(this.deptId)
        this.deptIds =this.deptId.split(",")
        if(null==this.timer){
            this.timer=  setInterval(() =>{
                this.init();
            },3000);
            }else{
                this.init()
            }
    },
    computed:{
        ...mapState("app", {   // 对象形式
        alarmList: "alarmList",
        lightSwitch:"lightSwitch",
        extExpSwitch:"extExpSwitch"
        })
    },
    methods:{
        getFlash(row){
            //2、报警消息时，闪烁
            let f = this.alarmList.some(alarm=>
                alarm ==row.deviceId
            );
            if(f){
            if(row.displayAlarm=="2"){//告警
                return true;
            }
            }
            if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
            {//1、试灯打开
            console.log("extExpSwitch=="+this.extExpSwitch)
            if(row.displayAlarm=="2"){//告警
                return true;
            }
            }
            return false;
            },
            getColorName(row){
            //告警消息
            if("2"== row.displayAlarm){
            let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
            );
            if(f){
            return 'red';
            }

            //3、显示设备状态颜色
            if(row.warnStatus=='1'||row.warnStatus=='0'){
                return 'black';
                }
                return 'red'
            
                        
            }
            return "black";

            },
            getColor(row){
            // console.log(row)

                if("2"== row.displayAlarm){  //告警类型
                    //告警消息
                    let f = this.alarmList.some(alarm=>
                        alarm ==row.deviceId
                        );
                        if(f){//2、有报警通知，则显示灯的颜色
                        return row.lightColor;
                        }
                    }
                    if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
                    console.log("extExpSwitch=="+this.extExpSwitch)
                        return row.lightColor;
                    }
                    //3、显示设备状态颜色
                    if(row.warnStatus=='1'||row.warnStatus=='0'){
                    return 'grey';
                    }
                    return row.lightColor;
            },
            init(){
                listDevs({"deptIds":this.deptId}).then(response=>{
                    this.loading1=false
                    this.data=[]
                    this.loading1=false
                    // console.log(this.datas)
                    let dataArr =response.data;
                    console.log(dataArr)
                    if(dataArr){
                     

                        let data1=  dataArr.sort((a,b)=> {
                            return a.systemId.split("-")[1]-b.systemId.split("-")[1]})

                        data1.n1={moni:[],title:"",kaig:[]}
                        // data1.n1.moni= data1.filter(item=>{
                        //     return "BA" == item.modality    && item.systemId.startsWith("16M") && item.deviceName.startsWith("1#燃油分油机")
                        // })

                        data1.n1.kaig= data1.filter(item=>{
                            return   "MR" == item.modality  
                        })
                        data1.n1.title=this.title[0]
                        this.data.push(data1.n1)

                        // //n2
                        // data1.n2={moni:[],title:"",kaig:[]}
                        // // let n2=["16M-002","16M-007"]
                        // data1.n2.moni= data1.filter(item=>{
                        //     return    item.systemId.startsWith("16M") && item.deviceName.startsWith("2#燃油分油机")
                        // })

                        // data1.n2.kaig= data1.filter(item=>{
                        //     return   item.systemId.startsWith("16K") && item.deviceName.startsWith("2#燃油分油机")
                        // })
                        // data1.n2.title=this.title[1]
                        // this.data.push(data1.n2)
                        // //n3
                        // data1.n3={moni:[],title:"",kaig:[]}
                        // // let n3=["16M-003","16M-008"]
                        // data1.n3.moni= data1.filter(item=>{
                        //     return  item.systemId.startsWith("16M") && item.deviceName.startsWith("1#滑油分油机")
                        // })

                        // data1.n3.kaig= data1.filter(item=>{
                        //     return  item.systemId.startsWith("16K") && item.deviceName.startsWith("1#滑油分油机")
                        // })
                        // data1.n3.title=this.title[2]
                        // this.data.push(data1.n3)
                        // //n4
                        // data1.n4={moni:[],title:"",kaig:[]}
                        // // let n4=["16M-004","16M-009"]
                        // data1.n4.moni= data1.filter(item=>{
                        //     return item.systemId.startsWith("16M") && item.deviceName.startsWith("2#滑油分油机")
                        // })

                        // data1.n4.kaig= data1.filter(item=>{
                        //     return item.systemId.startsWith("16K") && item.deviceName.startsWith("2#滑油分油机")
                        // })
                        // data1.n4.title=this.title[3]
                        // this.data.push(data1.n4)

                        // //n5
                        // data1.n5={moni:[],title:"",kaig:[]}
                        // data1.n5.moni= data0.filter(item=>{
                        //       return item.systemId.startsWith("14M")
                        // })

                        // data1.n5.kaig= data0.filter(item=>{
                        //     return item.systemId.startsWith("14K")
                        // })
                        // data1.n5.title=this.title[4]
                        // this.data.push(data1.n5)


                        // //n5
                        // // let n6=["16M-005","16M-010"]
                        // data1.n6={moni:[],title:"",kaig:[]}
                        // data1.n6.moni= data1.filter(item=>{
                        //     return item.systemId.startsWith("16M") && item.deviceName.startsWith("供油单元")
                        // })

                        // data1.n6.kaig= data1.filter(item=>{
                        //     return item.systemId.startsWith("16K") && item.deviceName.startsWith("供油单元")
                        // })
                        // data1.n6.title=this.title[5]
                        // this.data.push(data1.n6)
                        
                       
                    }

                }) 
            }
    },
    beforeDestroy() {
        if(this.timer){
        clearInterval(this.timer);
        this.timer=null;
        }
    },
}
</script>
<style scoped>
*{
    padding:0;
    margin:0;
   
}
.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }
.help{
    border:solid 1px black;
}
.help1{
    border:solid 1px black;
}
.main {
    max-height:100%;background:#A9AAAC;height:100%;overflow: auto;
   
}
.help:nth-child(2){
    border-left:none;
}
.help1:nth-child(2){
    border-top:none;
}
.inlineline{
    flex:3;display:grid; grid-template-columns: repeat(4, 1fr);gap: 10px 10px; margin-left:10px;text-align:center;
}
</style>